<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="编辑会员信息"
        width="1060px"
    >
        <div class="edit_page_div">
            <div>
                <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px" style="float: left;">
                    <el-form-item label="会员编号" prop="memberCode">
                        <el-input v-model="form.memberCode" style="width: 400px;" placeholder="系统生成" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="会员名称" prop="memberName">
                        <el-input v-model="form.memberName" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="时长" prop="durationNum">
                        <el-input v-model="form.durationNum" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="measurementUnit">
                        <select-option v-model="form.measurementUnit" :list="measurementUnitList" select-width="400px"></select-option>
                    </el-form-item>
                    <el-form-item label="金额" prop="amountMoney">
                        <el-input v-model="form.amountMoney" style="width: 380px;"></el-input>
                        <div class="item_Unit">元</div>
                    </el-form-item>
                    <el-form-item label="折扣" prop="discountNum">
                        <el-input v-model="form.discountNum" style="width: 380px;"></el-input>
                        <div class="item_Unit">%</div>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="form.remarks" style="width: 400px;"></el-input>
                    </el-form-item>
                </el-form>
                <div class="page_tree" style="width: 500px; height: 500px; float: right; overflow: auto;">
                    <el-tree
                        ref="tree"
                        v-loading="loading"
                        :data="dataList"
                        :expand-on-click-node="false"
                        :props="defaultProps"
                        default-expand-all
                        node-key="id"
                        show-checkbox
                    >
                        <div slot-scope="{ node, data }" class="tree_power" style="width: 400px;">
                            <div class="tree_power_name">{{ data.powerName }}</div>
                            <div class="tree_power_btn">
                                <el-checkbox v-for="(item,index) in data.btnList" :key="item.id" v-model="item.checkFlag" :checked="item.checkFlag" :label="item.powerName"></el-checkbox>
                            </div>
                        </div>
                    </el-tree>
                </div>
            </div>
            <div class="edit_button" style="margin-top: 10px">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import UploadFile from "@/components/upload/uploadFile.vue";
import SelectOption from "@/components/select/selectOption.vue";

export default {
    name: "memberEdit",
    components: {SelectOption, UploadFile},
    props: {
        visible: Boolean,
        id: String,
        selectIdList: Array,
    },
    data() {
        return {
            loading: false,
            showUser: false,
            form: {
                memberCode: '', //会员编号
                memberName: '', //会员名称
                durationNum: 12, //时长
                measurementUnit: 'months', //计量单位（数据字典：计量单位）
                amountMoney: '', //金额
                discountNum: '', //折扣
                remarks: '', //备注
                enableFlag: 1, //是否启用（0：否；1：是）
            },
            rules: {
                memberCode: [{required: true, message: '', trigger: 'change'}],
                memberName: [{required: true, message: '', trigger: 'change'}],
                durationNum: [{required: false, message: '', trigger: 'change'}],
                measurementUnit: [{required: false, message: '', trigger: 'change'}],
                amountMoney: [{required: false, message: '', trigger: 'change'}],
                discountNum: [{required: false, message: '', trigger: 'change'}],
                remarks: [{required: false, message: '', trigger: 'change'}],
            },

            measurementUnitList: [],

            dataList: [],
            defaultProps: {
                children: 'childList'
            },
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.measurementUnitList = this.$common.getDicList("measurementUnit");
                this.getTreeList();
                if (this.id) {
                    this.getData();
                }
            }
        }
    },
    methods: {
        getTreeList() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/systemPower/getAllList", {
                memberId: this.id,
            }).then(res => {
                this.dataList = res.data;
                this.$nextTick(() => {
                    this.$refs.tree.setCheckedKeys(this.selectIdList);
                })
            }).finally(() => {
                this.loading = false;
            })
        },
        getData() {
            this.loading = true;
            this.$axios.get("/CHILD_SYSTEM/systemMember/getOneEntity/" + this.id).then(res => {
                this.form = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let res = this.$refs.tree.getCheckedKeys();
                    this.getCheckedKeys(res, this.dataList);
                    if (res.length === 0) {
                        return this.$message.warning('至少选择一个菜单')
                    }
                    let idList = []
                    res.forEach((i, n) => {
                        if (!isNaN(i)) {
                            idList.push(i);
                        }
                    })
                    this.form.powerIdList = idList;
                    this.loading = true;
                    this.$axios.post("/CHILD_SYSTEM/systemMember/" + (this.id ? "update" : "insert"), this.form).then(res => {
                        this.resetForm();
                        this.$message.success(res.message);
                    }).finally(() => {
                        this.loading = false;
                    })
                } else {
                    this.$message.error('表单填写有误');
                    return false;
                }
            });
        },
        getCheckedKeys(res, tree) {
            tree.forEach(node => {
                if (node.childList !== null && node.childList.length > 0) {
                    this.getCheckedKeys(res, node.childList);
                }
                if (node.btnList !== null && node.btnList.length > 0) {
                    node.btnList.forEach(temp => {
                        if (temp.checkFlag) {
                            res.push(temp.id)
                        }
                    })
                }
            })
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form = this.$options.data().form;
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
    }
}
</script>

<style scoped>

</style>